<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>家族史记录表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            font-size: 14px;
            line-height: 1.5;
            max-width: 750px;
            margin: 0 auto;
            padding: 10px;
        }
        
        .form-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
            margin-bottom: 20px;
        }
        
        h1 {
            font-size: 18px;
            text-align: center;
            margin-bottom: 15px;
            color: #2c80ff;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .section {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #eee;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 16px;
        }
        
        .section-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background-color: #2c80ff;
            color: white;
            border-radius: 50%;
            margin-right: 8px;
            font-size: 14px;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        input[type="text"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background-color: #fff;
        }
        
        input:focus,
        select:focus,
        textarea:focus {
            border-color: #2c80ff;
            outline: none;
        }
        
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .checkbox-item input {
            margin-right: 6px;
        }
        
        .inline-input {
            display: inline-block;
            width: auto;
            margin: 0 5px;
        }
        
        .add-btn {
            background-color: #2c80ff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        
        .add-btn:hover {
            background-color: #1a6fe0;
        }
        
        .add-btn::before {
            content: "+";
            margin-right: 5px;
            font-weight: bold;
        }
        
        .remove-btn {
            background-color: #ff4757;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            margin-left: 10px;
        }
        
        .disease-item {
            background-color: #f9f9f9;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 10px;
            position: relative;
        }
        
        .submit-btn {
            background-color: #2c80ff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
        }
        
        .submit-btn:hover {
            background-color: #1a6fe0;
        }
        
        .example-text {
            font-size: 12px;
            color: #888;
            margin-top: 3px;
        }
        
        .no-history {
            color: #888;
            font-style: italic;
            margin: 10px 0;
        }
        
        .relative-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 5px;
        }
        
        .early-onset-note {
            font-size: 12px;
            color: #ff4757;
            margin-top: 3px;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>家族史记录表单</h1>
        <p style="text-align: center; margin-bottom: 15px; color: #666;">系统性家族史记录，评估遗传与家族聚集风险</p>
        
        <form id="family-history-form">
            <!-- 1. 家族性/遗传性疾病 -->
            <div class="section">
                <div class="section-title">
                    <span class="section-number">1</span>
                    <span>家族性/遗传性疾病</span>
                </div>
                
                <p style="margin-bottom: 10px; color: #666;">明确诊断的遗传病，如血友病、地中海贫血、亨廷顿舞蹈症、马凡综合征等</p>
                
                <div id="genetic-disease-container">
                    <div class="disease-item">
                        <div class="form-group">
                            <label for="genetic-disease-1">遗传病名称</label>
                            <input type="text" id="genetic-disease-1" placeholder="如：血友病、地中海贫血">
                        </div>
                        
                        <div class="form-group">
                            <label>亲属关系</label>
                            <div class="relative-options">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="genetic-relative-father-1" name="genetic-relative-1">
                                    <label for="genetic-relative-father-1">父亲</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="genetic-relative-mother-1" name="genetic-relative-1">
                                    <label for="genetic-relative-mother-1">母亲</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="genetic-relative-brother-1" name="genetic-relative-1">
                                    <label for="genetic-relative-brother-1">兄弟</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="genetic-relative-sister-1" name="genetic-relative-1">
                                    <label for="genetic-relative-sister-1">姐妹</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="genetic-relative-son-1" name="genetic-relative-1">
                                    <label for="genetic-relative-son-1">儿子</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="genetic-relative-daughter-1" name="genetic-relative-1">
                                    <label for="genetic-relative-daughter-1">女儿</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="genetic-relative-other-1" name="genetic-relative-1">
                                    <label for="genetic-relative-other-1">其他</label>
                                    <input type="text" id="genetic-relative-other-text-1" class="inline-input" style="display:none; width:100px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button type="button" class="add-btn" id="add-genetic-disease">添加遗传病记录</button>
                
                <div class="no-history">
                    <input type="checkbox" id="no-genetic-disease">
                    <label for="no-genetic-disease">无家族性/遗传性疾病</label>
                </div>
            </div>
            
            <!-- 2. 常见多基因病 -->
            <div class="section">
                <div class="section-title">
                    <span class="section-number">2</span>
                    <span>常见多基因病</span>
                </div>
                
                <!-- 心血管疾病 -->
                <div class="form-group">
                    <label>心血管疾病</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="cardio-hypertension" name="cardiovascular">
                            <label for="cardio-hypertension">高血压</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="cardio-chd" name="cardiovascular">
                            <label for="cardio-chd">冠心病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="cardio-early-mi" name="cardiovascular">
                            <label for="cardio-early-mi">早发心梗</label>
                        </div>
                    </div>
                    
                    <p class="early-onset-note">早发心梗定义：男性&lt;55岁，女性&lt;65岁</p>
                    
                    <div id="cardiovascular-details" style="display:none; margin-top:10px;">
                        <div class="form-group">
                            <label for="cardiovascular-relatives">亲属关系与发病年龄</label>
                            <textarea id="cardiovascular-relatives" rows="2" placeholder="记录：疾病、亲属关系、发病年龄（如'父亲于50岁时确诊心肌梗死'）"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 代谢性疾病 -->
                <div class="form-group">
                    <label>代谢性疾病</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="metabolic-diabetes" name="metabolic">
                            <label for="metabolic-diabetes">糖尿病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="metabolic-hyperlipidemia" name="metabolic">
                            <label for="metabolic-hyperlipidemia">高脂血症</label>
                        </div>
                    </div>
                    
                    <div id="metabolic-details" style="display:none; margin-top:10px;">
                        <div class="form-group">
                            <label for="metabolic-relatives">亲属关系与发病年龄</label>
                            <textarea id="metabolic-relatives" rows="2" placeholder="记录：疾病、亲属关系、发病年龄"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 肿瘤 -->
                <div class="form-group">
                    <label>肿瘤</label>
                    <p class="example-text">特别是直系亲属的恶性肿瘤史（如母亲/姐妹的乳腺癌、卵巢癌；家族的结直肠癌）</p>
                    
                    <div id="cancer-container">
                        <div class="disease-item">
                            <div class="form-group">
                                <label for="cancer-type-1">肿瘤类型</label>
                                <input type="text" id="cancer-type-1" placeholder="如：乳腺癌、结直肠癌">
                            </div>
                            
                            <div class="form-group">
                                <label for="cancer-relative-1">亲属关系</label>
                                <select id="cancer-relative-1">
                                    <option value="">请选择</option>
                                    <option value="父亲">父亲</option>
                                    <option value="母亲">母亲</option>
                                    <option value="兄弟">兄弟</option>
                                    <option value="姐妹">姐妹</option>
                                    <option value="儿子">儿子</option>
                                    <option value="女儿">女儿</option>
                                    <option value="祖父母">祖父母</option>
                                    <option value="其他">其他</option>
                                </select>
                                <input type="text" id="cancer-relative-other-1" class="inline-input" placeholder="具体关系" style="display:none; width:120px;">
                            </div>
                            
                            <div class="form-group">
                                <label for="cancer-age-1">发病年龄</label>
                                <input type="number" id="cancer-age-1" placeholder="确诊时的年龄">
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="add-btn" id="add-cancer">添加肿瘤记录</button>
                </div>
                
                <!-- 精神神经疾病 -->
                <div class="form-group">
                    <label>精神神经疾病</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="neuro-alzheimer" name="neuro">
                            <label for="neuro-alzheimer">阿尔兹海默症</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="neuro-schizophrenia" name="neuro">
                            <label for="neuro-schizophrenia">精神分裂症</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="neuro-other" name="neuro">
                            <label for="neuro-other">其他</label>
                            <input type="text" id="neuro-other-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                    
                    <div id="neuro-details" style="display:none; margin-top:10px;">
                        <div class="form-group">
                            <label for="neuro-relatives">亲属关系与发病年龄</label>
                            <textarea id="neuro-relatives" rows="2" placeholder="记录：疾病、亲属关系、发病年龄"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 其他 -->
                <div class="form-group">
                    <label>其他多基因病</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="other-autoimmune" name="other-polygenic">
                            <label for="other-autoimmune">自身免疫病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="other-asthma" name="other-polygenic">
                            <label for="other-asthma">哮喘</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="other-other" name="other-polygenic">
                            <label for="other-other">其他</label>
                            <input type="text" id="other-polygenic-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                    
                    <div id="other-polygenic-details" style="display:none; margin-top:10px;">
                        <div class="form-group">
                            <label for="other-polygenic-relatives">亲属关系与发病年龄</label>
                            <textarea id="other-polygenic-relatives" rows="2" placeholder="记录：疾病、亲属关系、发病年龄"></textarea>
                        </div>
                    </div>
                </div>
                
                <div class="no-history">
                    <input type="checkbox" id="no-polygenic-disease">
                    <label for="no-polygenic-disease">无常见多基因病家族史</label>
                </div>
            </div>
            
            <!-- 3. 传染病 -->
            <div class="section">
                <div class="section-title">
                    <span class="section-number">3</span>
                    <span>传染病</span>
                </div>
                
                <p style="margin-bottom: 10px; color: #666;">如肺结核等，评估接触和易感风险</p>
                
                <div class="form-group">
                    <label>传染病类型</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="infectious-tb" name="infectious">
                            <label for="infectious-tb">肺结核</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="infectious-hepatitis" name="infectious">
                            <label for="infectious-hepatitis">病毒性肝炎</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="infectious-hiv" name="infectious">
                            <label for="infectious-hiv">HIV/AIDS</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="infectious-other" name="infectious">
                            <label for="infectious-other">其他</label>
                            <input type="text" id="infectious-other-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="infectious-relatives">患病亲属与接触情况</label>
                    <textarea id="infectious-relatives" rows="3" placeholder="记录：疾病、亲属关系、接触情况（如同住、密切接触等）"></textarea>
                </div>
                
                <div class="no-history">
                    <input type="checkbox" id="no-infectious-disease">
                    <label for="no-infectious-disease">无传染病家族史</label>
                </div>
            </div>
            
            <div class="form-group">
                <div class="checkbox-item">
                    <input type="checkbox" id="confirm-info" required>
                    <label for="confirm-info">确认信息无误，提交记录</label>
                </div>
            </div>
            
            <button type="submit" class="submit-btn">提交记录</button>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 遗传病 - 添加记录
            let geneticDiseaseCount = 1;
            document.getElementById('add-genetic-disease').addEventListener('click', function() {
                geneticDiseaseCount++;
                const container = document.getElementById('genetic-disease-container');
                const newItem = document.createElement('div');
                newItem.className = 'disease-item';
                newItem.innerHTML = `
                    <button type="button" class="remove-btn" onclick="this.parentElement.remove()">删除</button>
                    <div class="form-group">
                        <label for="genetic-disease-${geneticDiseaseCount}">遗传病名称</label>
                        <input type="text" id="genetic-disease-${geneticDiseaseCount}" placeholder="如：血友病、地中海贫血">
                    </div>
                    
                    <div class="form-group">
                        <label>亲属关系</label>
                        <div class="relative-options">
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic-relative-father-${geneticDiseaseCount}" name="genetic-relative-${geneticDiseaseCount}">
                                <label for="genetic-relative-father-${geneticDiseaseCount}">父亲</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic-relative-mother-${geneticDiseaseCount}" name="genetic-relative-${geneticDiseaseCount}">
                                <label for="genetic-relative-mother-${geneticDiseaseCount}">母亲</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic-relative-brother-${geneticDiseaseCount}" name="genetic-relative-${geneticDiseaseCount}">
                                <label for="genetic-relative-brother-${geneticDiseaseCount}">兄弟</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic-relative-sister-${geneticDiseaseCount}" name="genetic-relative-${geneticDiseaseCount}">
                                <label for="genetic-relative-sister-${geneticDiseaseCount}">姐妹</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic-relative-son-${geneticDiseaseCount}" name="genetic-relative-${geneticDiseaseCount}">
                                <label for="genetic-relative-son-${geneticDiseaseCount}">儿子</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic-relative-daughter-${geneticDiseaseCount}" name="genetic-relative-${geneticDiseaseCount}">
                                <label for="genetic-relative-daughter-${geneticDiseaseCount}">女儿</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="genetic-relative-other-${geneticDiseaseCount}" name="genetic-relative-${geneticDiseaseCount}">
                                <label for="genetic-relative-other-${geneticDiseaseCount}">其他</label>
                                <input type="text" id="genetic-relative-other-text-${geneticDiseaseCount}" class="inline-input" style="display:none; width:100px;">
                            </div>
                        </div>
                    </div>
                `;
                container.appendChild(newItem);
                
                // 为新增的"其他"选项添加事件监听
                document.getElementById(`genetic-relative-other-${geneticDiseaseCount}`).addEventListener('change', function() {
                    document.getElementById(`genetic-relative-other-text-${geneticDiseaseCount}`).style.display = this.checked ? 'inline-block' : 'none';
                });
            });
            
            // 心血管疾病动态显示
            const cardiovascularCheckboxes = document.querySelectorAll('input[name="cardiovascular"]');
            cardiovascularCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(cardiovascularCheckboxes).some(cb => cb.checked);
                    document.getElementById('cardiovascular-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 代谢性疾病动态显示
            const metabolicCheckboxes = document.querySelectorAll('input[name="metabolic"]');
            metabolicCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(metabolicCheckboxes).some(cb => cb.checked);
                    document.getElementById('metabolic-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 肿瘤 - 添加记录
            let cancerCount = 1;
            document.getElementById('add-cancer').addEventListener('click', function() {
                cancerCount++;
                const container = document.getElementById('cancer-container');
                const newItem = document.createElement('div');
                newItem.className = 'disease-item';
                newItem.innerHTML = `
                    <button type="button" class="remove-btn" onclick="this.parentElement.remove()">删除</button>
                    <div class="form-group">
                        <label for="cancer-type-${cancerCount}">肿瘤类型</label>
                        <input type="text" id="cancer-type-${cancerCount}" placeholder="如：乳腺癌、结直肠癌">
                    </div>
                    
                    <div class="form-group">
                        <label for="cancer-relative-${cancerCount}">亲属关系</label>
                        <select id="cancer-relative-${cancerCount}">
                            <option value="">请选择</option>
                            <option value="父亲">父亲</option>
                            <option value="母亲">母亲</option>
                            <option value="兄弟">兄弟</option>
                            <option value="姐妹">姐妹</option>
                            <option value="儿子">儿子</option>
                            <option value="女儿">女儿</option>
                            <option value="祖父母">祖父母</option>
                            <option value="其他">其他</option>
                        </select>
                        <input type="text" id="cancer-relative-other-${cancerCount}" class="inline-input" placeholder="具体关系" style="display:none; width:120px;">
                    </div>
                    
                    <div class="form-group">
                        <label for="cancer-age-${cancerCount}">发病年龄</label>
                        <input type="number" id="cancer-age-${cancerCount}" placeholder="确诊时的年龄">
                    </div>
                `;
                container.appendChild(newItem);
                
                // 为新增的亲属关系选项添加事件监听
                document.getElementById(`cancer-relative-${cancerCount}`).addEventListener('change', function() {
                    const otherInput = document.getElementById(`cancer-relative-other-${cancerCount}`);
                    otherInput.style.display = this.value === '其他' ? 'inline-block' : 'none';
                });
            });
            
            // 精神神经疾病动态显示
            const neuroCheckboxes = document.querySelectorAll('input[name="neuro"]');
            neuroCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(neuroCheckboxes).some(cb => cb.checked);
                    document.getElementById('neuro-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 其他多基因病动态显示
            const otherPolygenicCheckboxes = document.querySelectorAll('input[name="other-polygenic"]');
            otherPolygenicCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(otherPolygenicCheckboxes).some(cb => cb.checked);
                    document.getElementById('other-polygenic-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 其他选项输入框
            document.getElementById('neuro-other').addEventListener('change', function() {
                document.getElementById('neuro-other-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('other-other').addEventListener('change', function() {
                document.getElementById('other-polygenic-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('infectious-other').addEventListener('change', function() {
                document.getElementById('infectious-other-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            // 亲属关系其他选项
            document.getElementById('genetic-relative-other-1').addEventListener('change', function() {
                document.getElementById('genetic-relative-other-text-1').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('cancer-relative-1').addEventListener('change', function() {
                document.getElementById('cancer-relative-other-1').style.display = this.value === '其他' ? 'inline-block' : 'none';
            });
            
            // 无病史选项
            document.getElementById('no-genetic-disease').addEventListener('change', function() {
                if (this.checked) {
                    document.getElementById('genetic-disease-container').innerHTML = `
                        <div class="disease-item">
                            <div class="form-group">
                                <label for="genetic-disease-1">遗传病名称</label>
                                <input type="text" id="genetic-disease-1" placeholder="如：血友病、地中海贫血">
                            </div>
                            
                            <div class="form-group">
                                <label>亲属关系</label>
                                <div class="relative-options">
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="genetic-relative-father-1" name="genetic-relative-1">
                                        <label for="genetic-relative-father-1">父亲</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="genetic-relative-mother-1" name="genetic-relative-1">
                                        <label for="genetic-relative-mother-1">母亲</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="genetic-relative-brother-1" name="genetic-relative-1">
                                        <label for="genetic-relative-brother-1">兄弟</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="genetic-relative-sister-1" name="genetic-relative-1">
                                        <label for="genetic-relative-sister-1">姐妹</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="genetic-relative-son-1" name="genetic-relative-1">
                                        <label for="genetic-relative-son-1">儿子</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="genetic-relative-daughter-1" name="genetic-relative-1">
                                        <label for="genetic-relative-daughter-1">女儿</label>
                                    </div>
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="genetic-relative-other-1" name="genetic-relative-1">
                                        <label for="genetic-relative-other-1">其他</label>
                                        <input type="text" id="genetic-relative-other-text-1" class="inline-input" style="display:none; width:100px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    geneticDiseaseCount = 1;
                    
                    // 重新绑定事件
                    document.getElementById('genetic-relative-other-1').addEventListener('change', function() {
                        document.getElementById('genetic-relative-other-text-1').style.display = this.checked ? 'inline-block' : 'none';
                    });
                }
            });
            
            document.getElementById('no-polygenic-disease').addEventListener('change', function() {
                if (this.checked) {
                    cardiovascularCheckboxes.forEach(cb => cb.checked = false);
                    metabolicCheckboxes.forEach(cb => cb.checked = false);
                    neuroCheckboxes.forEach(cb => cb.checked = false);
                    otherPolygenicCheckboxes.forEach(cb => cb.checked = false);
                    
                    document.getElementById('cardiovascular-details').style.display = 'none';
                    document.getElementById('metabolic-details').style.display = 'none';
                    document.getElementById('neuro-details').style.display = 'none';
                    document.getElementById('other-polygenic-details').style.display = 'none';
                    
                    document.getElementById('cancer-container').innerHTML = `
                        <div class="disease-item">
                            <div class="form-group">
                                <label for="cancer-type-1">肿瘤类型</label>
                                <input type="text" id="cancer-type-1" placeholder="如：乳腺癌、结直肠癌">
                            </div>
                            
                            <div class="form-group">
                                <label for="cancer-relative-1">亲属关系</label>
                                <select id="cancer-relative-1">
                                    <option value="">请选择</option>
                                    <option value="父亲">父亲</option>
                                    <option value="母亲">母亲</option>
                                    <option value="兄弟">兄弟</option>
                                    <option value="姐妹">姐妹</option>
                                    <option value="儿子">儿子</option>
                                    <option value="女儿">女儿</option>
                                    <option value="祖父母">祖父母</option>
                                    <option value="其他">其他</option>
                                </select>
                                <input type="text" id="cancer-relative-other-1" class="inline-input" placeholder="具体关系" style="display:none; width:120px;">
                            </div>
                            
                            <div class="form-group">
                                <label for="cancer-age-1">发病年龄</label>
                                <input type="number" id="cancer-age-1" placeholder="确诊时的年龄">
                            </div>
                        </div>
                    `;
                    cancerCount = 1;
                    
                    // 重新绑定事件
                    document.getElementById('cancer-relative-1').addEventListener('change', function() {
                        document.getElementById('cancer-relative-other-1').style.display = this.value === '其他' ? 'inline-block' : 'none';
                    });
                }
            });
            
            document.getElementById('no-infectious-disease').addEventListener('change', function() {
                if (this.checked) {
                    document.querySelectorAll('input[name="infectious"]').forEach(cb => cb.checked = false);
                    document.getElementById('infectious-relatives').value = '';
                }
            });
        });
        
        // 表单提交
        document.getElementById('family-history-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('家族史记录提交成功！');
            // 在实际应用中，这里应该发送数据到服务器
        });
    </script>
</body>
</html>